<template>
<div class="container__">
    <div class="boxi">
        <div class="aaa" @click="cashjilu">
            <van-icon name="cash-on-deliver" />提现记录
        </div>
        <div class="bbb">
            <span class="lab">提现到</span>
            <span class="wx">
              <van-icon name="wechat" class="wech"/>  微信
                </span>
        </div>
        <div class="ccc">
            <div class="lab pad">提现金额</div>

            <van-field :value="value" type="number" @change="onChange">
                <view slot="left-icon" style="color:#46B7FF">￥</view>
            </van-field> 

            <div class="pad bom">当前可提现￥<span v-if="cashINfo.row">{{cashINfo.row}}</span>,最低提现金额<span v-if="cashINfo.tixian">{{cashINfo.tixian.min_money}}</span></div>
        </div>
    </div>
    <div class="button" @click="cashmoney">提现</div>

    <van-popup :show="passwordshow" position="bottom">
        <div class="passwordclose">
            <span>输入密码</span>
            <div @click="closeOn">关闭</div>
        </div>
        <div class="inputbox">
            <passwordInput @inputChange="inputChange" :code="addform.password"/>
        </div>
    </van-popup>
</div>
</template>

<script>
import passwordInput from '@/components/passwordInput'
import {getcash} from '@/api/my'
import {postcash} from '@/api/my'
export default {
    components: {
        passwordInput
    },
    data() {
        return {
            addform: {
                money: '',
                pass: '',
                password:''
            },
            passwordshow: false,
            cashINfo:""

        }
    },
    methods: {
        onChange(e) {
            this.addform.money = e.mp.detail
        },
        inputChange(e) {
            if (e.mp.detail.value.length == 6) {
                //输入框的值
                this.addform.password = e.mp.detail.value
                // console.log(e.mp.detail.value),
                postcash(this.addform).then(res => {
                    if(res.code==200){
                        wx.showToast({
                            title: '提现成功',
                            duration: 1500,
                            mask: false,
                            success: (result)=>{
                                this.addform.password=null
                                wx.hideKeyboard()
                                this.passwordshow=false;  
                                wx.navigateBack({
                                    delta: 1
                                });
                            },
                            fail: ()=>{},
                            complete: ()=>{}
                        });
                    }else{
                        this.addform.password=null
                        wx.showToast({
                            title: res.msg,
                            icon: 'none',
                        });
                    }
                    
                })
            }
        },
        cashjilu() {
            wx.navigateTo({
                url: '/pages/cashjulu/main'
            })
        },
        cashmoney() {
            if (!this.addform.money) return
            this.passwordshow = true
        },
        closeOn() {
            this.passwordshow = false
            this.addform.password=null
            this.addform.pass=''
        }
        
    },
    onLoad(){
        Object.assign(this.$data, this.$options.data())
        getcash().then(res=>{
            if(res.code==200){
                this.cashINfo=res.data
            }
        })
    }
}
</script>

<style lang="scss">
.container__ {
    background-color: #fff;
    min-height: 100vh;
    font-size: 16px;
    // padding: 40px 15px;
    box-sizing: border-box;
    padding: 0 0 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .passwordclose {
        height: 42px;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: #fff;
        font-weight: bold;

        div {
            color: #666;
            font-size: 12px;
            font-weight: 500;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .inputbox {
        height: 428px;
        background-color: #fff;
        padding: 23px 0;
        box-sizing: border-box;
    }

    .button {
        width: 345px;
        height: 45px;
        background: #46B7FF;
        border-radius: 5px;
        margin: 0 auto;
        color: #fff;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .van-cell {
        align-items: center;
        font-size: 25px;
        font-weight: bold;
        color: rgba(102, 102, 102, 1);
        height: 50px;
        padding: 0 30px;

        .van-field__input {
            height: 100%;
        }
    }

    .van-icon {
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

    .boxi {
        height: 262px;
        background: url('../../../static/images/1.png') no-repeat;
        background-size: contain;
        // background-position: center;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .aaa {
            width: 345px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: #fff;
            font-size: 14px;

        }

        .lab {
            font-size: 15px;
            font-weight: bold;
            color: #666666;
        }

        .pad {
            padding: 0 17px;
        }

        .bbb {
            width: 345px;
            height: 55px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 30px 0 17px;

            .wech {
                font-size: 20px;
                color: forestgreen;
            }

            .wx {
                font-size: 15px;
                color: #333;
                display: flex;
                align-items: center,
            }
        }

        .ccc {
            width: 345px;
            height: 155px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .bom {
                font-size: 12px;
                color: #666;
            }
        }
    }

}
</style>
